<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer"/>
    <title>手记</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/mkysy.css">
</head>
<body>
    <div class="head">
        <div class="d1">
            <ul>
                <li class="li"><a href="#">慕课网首页</a></li>
                <li class="li1"><a href="#">免费课</a></li>
                <li class="li1"><a href="#">实战课</a></li>
                <li class="li1"><a href="#">体系课<i class="inc-new"></i></a></li>
                <li class="li1"><a href="#">慕课教程</a></li>
                <li class="li1"><a href="#">专栏</a></li>
                <li class="li1"><a href="#">手记</a></li>
            </ul>
            <div class="head-right">
                <div class="search-box">
                    <a href="#"><img class="img1" src="./img/搜索.png" alt=""></a>
                    <a href="#"><img class="img2" src="./img/搜索 (2).png" alt=""></a>
                </div>
                <div class="header-favorites">
                    <a href="#">收藏网站</a>
                    <div id="my">
                        <div class="div1">
                            <img src="./img/收藏.png" alt="">
                            <span>使用<a>Ctrl+D</a>可将网站添加到书签</span>
                        </div>
                    </div>
                </div>
                <div class="shop-cart">
                    <img class="img1" src="./img/购物车-选中.png" alt="">
                    <img class="img2" src="./img/购物车-选中 (1).png" alt="">
                    <div id="my-cart">
                        <div class="div1">
                            <p class="p1">我的购物车</p>
                            <p class="p2">已加入0门课程</p>
                        </div>
                        <div class="div2">
                            <div class="d1"><img src="./img/购物车-选中 (2).png" alt=""></div>
                            <p class="p1">购物车里空空如也</p>
                            <p class="p2">快去这里选购你中意的课程</p>
                            <p class="p3">实战课</p>
                            <p class="p3">体系课</p>
                        </div>
                        <div class="div3">
                            <p>我的订单中心</p>
                            <button>去购物车</button>
                        </div>
                    </div>
                </div>
                <div class="login-area">
                    <a href="#">登录/注册</a>
                </div>
            </div>
        </div>
        
    </div>
    <div class="head2">
        <div class="d1">
            <div class="left">
                <img class="img1" src="./img/article-logo.png" alt="">
                <img class="img2" src="./img/article-desc.png" alt="">
            </div>
            <div class="right">
                <div class="search-warp">
                    <input type="text" placeholder="搜索感兴趣的知识和文章">
                </div>
                <div class="showhide-search">
                    <img src="./img/搜索小.png" alt="">
                </div>
                <button>写文章</button>
            </div>
        </div>
    </div>
    <div id="main">
        <div class="article">
            <ul class="left_menu">
                <li class="li1 q1 l2">推荐</li>
                <li class="q1">资讯</li>
                <li class="q1">最新文章</li>
                <li class="q1">区块链</li>
                <li class="q1">人工智能</li>
                <li id="li9">大数据
                    <div id="my-1">
                        <ul>
                            <li class="l">计算机</li>
                            <li>容器</li>
                            <li>Kubernetes</li>
                            <li>OpenStack</li>
                            <li>Flink</li>
                            <li>AWS</li>
                            <li>阿里云</li>
                            <li>Storm</li>
                            <li>Hbase</li>
                            <li>Hadoop</li>
                            <li>Spark</li>
                            <li>R语言</li>
                            <li>Docker</li>
                            <li>挖掘</li>
                            <li>大数据</li>
                        </ul>
                    </div>
                </li>
                <li id="li8">前端开发
                    <div id="my-2">
                        <ul>
                            <li class="l">Sass/Less</li>
                            <li>Vue.js</li>
                            <li>前端工具</li>
                            <li>cSS3</li>
                            <li>Bootstrap</li>
                            <li>JavaScript</li>
                            <li>JQuery</li>
                            <li>Html5</li>
                            <li>Node.js</li>
                            <li>Html/CSS</li>
                            <li>React.JS</li>
                            <li>AngularJs</li>
                            <li>WebApp</li>
                            <li>小程序</li>
                            <li>Typescript</li>
                        </ul>
                    </div>
                </li>
                <li id="li7">后端开发
                    <div id="my-3">
                        <ul>
                            <li class="l">Ruby</li>
                            <li>C#</li>
                            <li>Go</li>
                            <li>C++</li>
                            <li>C</li>
                            <li>Python</li>
                            <li>JAVA</li>
                            <li>PHP</li>
                            <li>SpringBoot</li>
                            <li>Yii</li>
                            <li>ThinkPHP</li>
                            <li>SSM</li>
                            <li>Django</li>
                            <li>爬虫</li>
                            <li>Flask</li>
                            <li>Spring</li>
                            <li>JVM</li>
                            <li>.NET</li>
                            <li>MVVM</li>
                            <li>laravel</li>
                            <li>Tornado</li>
                            <li>Spring Cloud</li>
                            <li>Swoole</li>
                        </ul>
                    </div>
                </li>
                
                <li id="li6">移动互联
                    <div id="my-4">
                        <ul>
                            <li class="l">iOS</li>
                            <li>Android</li>
                            <li>WEEX</li>
                            <li>lonic</li>
                            <li>React Native</li>
                            <li>gradle</li>
                            <li class="li0">Android Studio</li>
                            <li>Kotlin</li>
                            <li>native</li>
                            <li>React</li>
                            <li>Swift</li>
                        </ul>
                    </div>
                </li>
                <li class="q1">工具资源</li>
                <li id="li5">职场生活
                    <div id="my-5">
                        <ul>
                            <li class="l">产品</li>
                            <li>面试</li>
                            <li>搞笑</li>
                            <li>幽默段子</li>
                            <li>征文</li>
                            <li>资讯</li>
                            <li>职场生活</li>
                        </ul>
                    </div>
                </li>
                <li class="q1">幽默段子</li>
                <li id="li4" class="li2">其他
                    <div id="my-6">
                        <ul>
                            <li class="l">正则表达式</li>
                            <li>源码</li>
                            <li>架构</li>
                            <li>安全</li>
                            <li>Git</li>
                            <li>开源</li>
                            <li>设计模式</li>
                            <li>API</li>
                            <li>操作系统</li>
                            <li>活动</li>
                            <li>编解码</li>
                            <li>ffmpeg</li>
                        </ul>
                    </div>
                </li>
            </ul>          
            <div class="centerlist">
                <div class="bannerBox">
                    <div class="left">
                        <img src="./img/慕课网1.png" alt="">
                    </div>
                    <div class="right">
                        <div class="top"><img src="./img/慕课网2.png" alt="">
                        <div class="bannerDescription2"><span>0基础开发Java语音听书项目</span></div>
                        </div>
                        <div class="bottom"><img src="./img/慕课网3.png" alt="">
                            <div class="bannerDescription2"><span>0基础开发前端民宿网页</span></div></div>
                    </div>
                </div>

                <div class="articleCon">
                    <div class="padding-block"></div>
                </div>
            </div>
            
            <div class="right_personalization">
                <div class="carefully_selected">
                    <div class="sevenImg"></div>
                    <div class="thirtyImg"></div>
                </div>
                <div class="column_recommend">
                    <div class="clearfix">
                        <h3>慕课专栏</h3>
                        <a href="#">更多></a>
                    </div>
                    <ul>
                        <li>
                            <div class="img"><img src="./img/5fc9da670001a27f05400720.jpg" alt=""></div>
                            <div class="text_con">
                                <p class="title">Java 并发编程深度解析</p>
                                <div class="info">
                                    <span>共54小节</span>
                                    <img src="./img/点.png" alt="">
                                    <span>202人已购买</span>
                                </div>
                                <div class="price_con">
                                    <p class="ori">¥ 58.00</p>
                                    <button>马上订阅</button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="img"><img src="./img/5fb36efe0001960e05400720.jpg" alt=""></div>
                            <div class="text_con">
                                <p class="title">Vue 核心源码详解38讲</p>
                                <div class="info">
                                    <span>共38小节</span>
                                    <img src="./img/点.png" alt="">
                                    <span>549人已购买</span>
                                </div>
                                <div class="price_con">
                                    <p class="ori">¥ 68.00</p>
                                    <button>马上订阅</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="recommended">
                    <div class="clearfix">
                        <h3>推荐作者</h3>
                        <a href="#">更多></a>
                    </div>
                    <ul class="personList">
                    </ul>
                </div>
            </div>    
        </div>
    </div>

    <div id="db">
        <div class="div1">
            <div class="left">
                <ul>
                    <li><a href="#">网站地图</a></li>
                    <li><a href="#">网站首页</a></li>
                    <li><a href="#">企业服务</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li> <a href="#">联系我们</a></li>
                    <li> <a href="#">讲师招募</a></li>
                    <li> <a href="#">帮助中心</a></li>
                    <li> <a href="#">意见反馈</a></li>
                    <li><a href="#">慕课大学</a></li>
                    <li><a href="#">代码托管</a></li>
                </ul>
                <p>Copyright&nbsp; © 2021 imooc.com All Rights Reserved | 京ICP备 12003892号-11&nbsp; <img src="./img/beianicon.png" alt="">&nbsp; 京公网安备11010802030151号</p>
            </div>
            <div class="right">
                <img id="img1" class="img1" src="./img/星星.png" alt="">
                <img id="img2" class="img1" src="./img/星星 (1).png" alt="">
                <img id="img4" class="img1" src="./img/微信.png" alt="">
                <img id="img3" class="img1" src="./img/微信 (1).png" alt="">
                <img id="img5" class="img1" src="./img/微博.png" alt="">
                <img id="img6" class="img1" src="./img/微博 (1).png" alt="">
                <img id="img7" class="img1" src="./img/QQ.png" alt="">
                <img id="img8" class="img1" src="./img/QQ (1).png" alt="">
                <div id="my1">
                    <div class="d1">
                        <img src="./img/收藏.png" alt="">
                        <p>使用 <a href="#">Ctrl+D</a> 可将网站添加到书签</p>
                    </div>
                </div>
                <div id="my2">
                    <img src="./img/elevator2.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/mkysj.js"></script>
    <script src="./js/mkysy.js"></script>
</body>
</html>